<!-- 行业动态页面 -->
<template>
  <view>
    <view class="search">
      <u-search border-color="#f4f5f9" search-icon-color="#FF6666" placeholder="关键词" v-model="keyword" @search="search"
        @custom="search"></u-search>
    </view>
    <!-- 使用自定义的搜索组件 -->
    <!--  <view class="search-box">
      <my-search :bgcolor="'#ffffff'" @mySearch="gotoSearch"></my-search>
    </view> -->


    <view class="leadnews_box" v-for="(item,index) in navList" :key="index" @click="gotoDetail(item)">
      <view class="leadnews_box_left">
        <view class="leadnews_box_left_name">
          <text>{{item.articleTitle}}</text>
        </view>
        <view class="leadnews_box_left_time">
          <text>{{item.createTime}}</text>
        </view>
      </view>
     <!-- <view class="leadnews_box_img">
        <u-image width="100%" height="100%" :src="url+item.materialUrl"></u-image>
      </view> -->
    </view>
  </view>
</template>

<script>
  import MySearch from '@/components/my-search/my-search.vue'
  export default {
    components: {
      MySearch
    },
    data() {
      return {
        //是否正在请求数据
        isloading: false,
        url: '',
        params: {
          categoryId: '',
          pageNum: 1,
          pageSize: 10,
        }, //列表数据请求参数
        navList: [],
        total: 0,
        articleType: '', //文章频道类型
      }
    },
    onReady(option) {


    },
    onLoad(option) {
      var barTitle = "";
      this.articleType = option.type
      if (option.type == 0) {
        barTitle = "行业动态";
      } else if (option.type == 1) {
        barTitle = "招标信息";
      } else if (option.type == 2) {
        barTitle = "热门话题";
      } else {
        barTitle = "商业头条";
      }
      setTimeout(function() {
        uni.setNavigationBarTitle({
          title: barTitle
        });
      }, 10);
      this.params.categoryId = option.type || '';
      this.listArticleInfo()
      this.url = this.baseUrl
    },
    methods: {
      // 下拉加载
      onPullDownRefresh() {
        // 重置关键数据
        this.params.pageNum = 1;
        this.total = 0;
        this.isloading = false
        this.navList = []
        this.listArticleInfo(() => uni.stopPullDownRefresh())
      },
      // 触底事件  上拉加载更多
      onReachBottom() {
        // 判断是否还有下一页数据
        if (this.params.pageNum * this.params.pageSize >= this.total) return this.$u.toast('数据加载完毕');
        if (this.isloading) return
        this.params.pageNum += 1
        this.listArticleInfo()
      },
      // 搜索页
      gotoSearch() {
        uni.navigateTo({
          url: '/subpackage/search/search?articleType=' + this.articleType
        })
      },
      // 跳转到 内容详情页
      gotoDetail(item) {
        uni.navigateTo({
          url: '/subpackage/industry_dynamic_detail/industry_dynamic_detail?articleId=' + item.articleId
        })
      },
      // 获取内容 列表
      listArticleInfo(cb) {
        this.isloading = true
        this.$u.api.article.articleTypeList(this.params)
          .then(res => {
            if (res.code != '200') return this.$u.toast(res.msg);
            this.isloading = false
            cb && cb()
            this.navList = [...this.navList, ...res.rows]
            this.total = res.total
          });
      },
    }
  }
</script>

<style lang="scss">
  // 搜索组件 吸顶效果
  .search-box {
    // 设置定位效果为“吸顶”
    position: sticky;
    // 吸顶的“位置”
    top: 0;
    // 提高层级，防止被轮播图覆盖
    z-index: 999;
  }

  .uni-thumb {
    image {
      width: 120rpx;
      height: 120rpx;
    }
  }

  .leadnews_box {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #E5E5E5;
    height: 200rpx;
    margin: 20rpx;

    .leadnews_box_left {
      width: 100%;
      height: 160rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .leadnews_box_left_name {
        height: 95rpx;
        line-height: 50rpx;
        text-overflow: -o-ellipsis-lastline;
        letter-spacing: 3rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }

    .leadnews_box_img {
      // width: 30%;
      // height: 160rpx;
    }
  }
</style>
